<!-- subpkg_consult/room/index.vue -->

<script>
  export default { name: 'SubpkgConsultRoomPage' }
</script>

<script setup>
  // import { io } from 'socket.io-client'
  import io from '@hyoga/uni-socket.io'
  import { baseURL } from '@/utils/http.js'
  import { useUserStore } from '@/stores/user'

  import { nextTick, ref } from 'vue'

  import PatientInfo from './components/patient-info'
  import NotifyInfo from './components/notify-info'
  import MessageInfo from './components/message-info'
  import PrescriptionInfo from './components/prescription-info'
  import RateInfo from './components/rate-info'
  import ImgLoading from './components/img-loading'
  import RoomStatus from './components/room-status'
  import { patientConsultOrderDetailApi } from '@/services/consult'

  const props = defineProps({
    orderId: String,
  })

  // 获取订单详情
  const orderDetail = ref({})
  const getOrderDetail = async () => {
    const res = await patientConsultOrderDetailApi(props.orderId)
    orderDetail.value = res.data
  }
  getOrderDetail()

  const userStore = useUserStore()

  const messageList = ref([])

  const scrollTop = ref(0)

  const socket = io(baseURL, {
    auth: { token: `Bearer ${userStore.basicInfo.token}` },
    query: { orderId: props.orderId },
    transports: ['websocket', 'polling'],
    timeout: 5000,
  })

  socket.on('connect', () => {
    console.log('连接建立成功')
    // 后续的一切通信操作都要在连接建立成功的基础上

    // 一旦连接建立成功，服务器会自动触发一次 chatMsgList 事件，将聊天记录给客户端
    // 所以不需要再次手动触发获取事件
    // socket.emit(
    //   'getChatMsgList',
    //   20,
    //   dateFormat(new Date(), 'yyyy-mm-dd'),
    //   props.orderId
    // )

    // [
    //   {
    //     items: [1, 2, 3]
    //   },
    //   {
    //     items: [4, 5, 6]
    //   }
    // ]

    // [1, 2, 3, 4, 5, 6]

    // [时间, 1, 2, 3, 时间, 4, 5, 6]

    // 获取聊天记录
    socket.on('chatMsgList', async (e) => {
      // 收起下拉刷新
      isRefreshing.value = false

      if (e.data.length === 0) return uni.utils.toast('没有更多聊天记录了')

      e.data.reverse() // 数据逆序，就是反过来

      for (const v of e.data) {
        // 在拆包每一组消息时，先插入一条时间通知消息，作为分组分割
        messageList.value.unshift(
          {
            id: v.createTime,
            msgType: 31,
            msg: {
              content: v.createTime,
            },
          },
          ...v.items
        )
      }
      // 此时数据push进去了，但是视图并不会立即更新，视图更新是异步的
      await nextTick()
      // 要等待视图更新完成后，在设置滚动距离
      scrollTop.value = 10000
    })

    // 接收服务器发送过来的消息
    socket.on('receiveChatMsg', async (msg) => {
      // 1. 更新已读状态
      socket.emit('updateMsgStatus', msg.id)
      // 2. 添加到消息列表中进行渲染
      messageList.value.push(msg)
      await nextTick()
      scrollTop.value += 10000

      // 收到图片消息后，隐藏loading
      // uni.hideLoading()
    })

    // 监听订单状态改变的事件，实时更新订单状态
    socket.on('statusChange', () => {
      // 重新获取订单详情
      getOrderDetail()
    })
  })

  // 发送文字消息
  const msgText = ref('')
  const sendTextMsg = () => {
    socket.emit('sendChatMsg', {
      from: userStore.basicInfo.id, // 发送人id
      to: orderDetail.value.docInfo.id, // 接收人id
      msgType: 1, // 1 文字，4 图片
      msg: {
        content: msgText.value,
        // picture: {
        //   id: 'string',
        //   url: 'string',
        // },
      },
    })

    // 发送完，要清空消息
    msgText.value = ''
  }

  const isShowImgLoading = ref(false)
  // 发送图片消息
  const sendImgMsg = async () => {
    // 加载中在这（早了）

    const res = await uniCloud.chooseAndUploadFile({
      type: 'image',
      count: 1,
      extension: ['.jpg', '.png', '.jpeg', '.gif'],
      async onChooseFile() {
        isShowImgLoading.value = true
        await nextTick()
        scrollTop.value += 10000
        // 选完了文件，但是此时还没上传
        // console.time('文件上传耗时：')
        // uni.showLoading({
        //   title: '加载中',
        //   mask: true,
        // })
      },
    })

    // 加载中在这显示（晚了，因为从 选完文件 到 上传文件  也是一个异步的过程）

    // 文件上传完了
    // console.timeEnd('文件上传耗时：')
    // uni.hideLoading()
    isShowImgLoading.value = false

    socket.emit('sendChatMsg', {
      from: userStore.basicInfo.id, // 发送人id
      to: orderDetail.value.docInfo.id, // 接收人id
      msgType: 4, // 1 文字，4 图片
      msg: {
        picture: {
          id: res.tempFiles[0].lastModified,
          url: res.tempFiles[0].url,
        },
      },
    })
  }

  const isRefreshing = ref(false)
  const onRefresh = () => {
    console.log('耍弄了..')

    isRefreshing.value = true

    // 获取历史消息记录
    socket.emit(
      'getChatMsgList', // 事件名称，固定的
      20, // 每页条数
      // dateFormat(new Date(), 'yyyy-mm-dd'), // 消息时间点
      messageList.value[0].id,
      props.orderId // 订单id
    )

    // setTimeout(() => {
    //   isRefreshing.value = false
    // }, 2000)
  }
</script>

<template>
  <view class="room-page">
    <!-- 问诊订单状态 -->
    <room-status
      :status-value="orderDetail.statusValue"
      :countdown="orderDetail.countdown"
      :status="orderDetail.status"
    />

    <scroll-view
      :scroll-top="scrollTop"
      refresher-enabled
      refresher-background="#f2f2f2"
      scroll-y
      style="flex: 1; overflow: hidden"
      @refresherrefresh="onRefresh"
      :refresher-triggered="isRefreshing"
    >
      <view class="message-container">
        <!-- 此处将来填充更多代码... -->

        <template v-for="v in messageList" :key="v.id">
          <!-- 患者信息（21） -->
          <PatientInfo v-if="v.msgType === 21" :info="v.msg.consultRecord" />

          <!-- 通知消息：普通通知（31）、温馨提示（32）、取消订单（33） -->
          <NotifyInfo
            v-if="[31, 32, 33].includes(v.msgType)"
            :type="v.msgType"
            >{{ v.msg.content }}</NotifyInfo
          >

          <!-- 文字消息（1）、图片消息（4） -->
          <MessageInfo v-if="[1, 4].includes(v.msgType)" :msg="v" />

          <!-- 处方消息（22） -->
          <PrescriptionInfo v-if="v.msgType === 22" :msg="v" />

          <!-- 未评价消息（23）、已评价消息（24） -->
          <RateInfo v-if="[23, 24].includes(v.msgType)" :msg="v" />

          <!-- 此处将来填充更多代码... -->
        </template>

        <ImgLoading v-if="isShowImgLoading" />
      </view>
    </scroll-view>

    <!-- 发送消息 -->
    <view class="message-bar">
      <template v-if="orderDetail.status === 3">
        <uni-easyinput
          v-model.trim="msgText"
          :clearable="false"
          :input-border="false"
          placeholder-style="font-size: 32rpx; color: #c3c3c5;"
          placeholder="问医生"
          @confirm="sendTextMsg"
        />
        <view class="image-button">
          <uni-icons
            :size="40"
            color="#979797"
            type="image"
            @click="sendImgMsg"
          ></uni-icons>
        </view>
      </template>
      <button v-else class="uni-button">咨询其它医生</button>
    </view>
  </view>
</template>

<style lang="scss">
  // subpkg_consult/room/index.scss
  .room-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* #ifdef H5 */
    height: calc(100vh - 44px);
    /* #endif */
    overflow: hidden;
    box-sizing: border-box;
    background-color: #f2f2f2;
  }

  .message-container {
    padding: 0 30rpx 60rpx;
    overflow: hidden;
  }

  .message-bar {
    background-color: red;
    display: flex;
    padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 40rpx);
    background-color: #fff;

    :deep(.is-disabled) {
      background-color: transparent !important;
    }

    :deep(.uni-easyinput__content-input) {
      height: 88rpx;
      padding: 0 44rpx !important;
      border-radius: 88rpx;
      color: #3c3e42;
      font-size: 32rpx;
      background-color: #f6f6f6;
    }

    .image-button {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 88rpx;
      width: 88rpx;
      margin-left: 30rpx;
    }

    .uni-button {
      flex: 1;
    }
  }
</style>
